Skip to content

fix(chart) :: line series up on a category axis for every chart type - #1371

Merged
lovasoa merged 1 commit into
sqlpage:mainfrom
81reap:stack/6-chart-category
Aug 13, 2026
Merged

fix(chart) :: line series up on a category axis for every chart type#1371
lovasoa merged 1 commit into
sqlpage:mainfrom
81reap:stack/6-chart-category

Conversation

@81reap

@81reap 81reap commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

Motivation

  • ApexCharts pairs points by index on a text axis whatever the chart type, not only for bar, so a line or scatter chart whose series skip different labels draws points against the wrong ones.
  • Filling the gap with zero, as a stack needs, would be wrong here: it draws a line down to zero where there is simply no measurement.

Description

  • align_series takes what a missing point is worth: zero to add nothing to a stack, null to leave a gap.
  • Align on a text axis for every chart type but rangeBar, whose y is a range and whose points ApexCharts already pairs by label.
  • Add a changelog entry.

Testing

  • 15 unit tests, the new ones covering the gap left for an unstacked series and a measured zero kept apart from a missing value.
  • The browser suite passes 41 tests, eight of them new: area, scatter and heatmap charts lined up on a text axis, a rangeBar chart left alone, and a bubble chart keeping its point sizes.
  • npm test checks 41 files and reports nothing.
  • no console errors on card page fails for the reason described in fix(biome.js) :: fix remaining lint issues #1366, on this branch and on the unmodified base alike.

GitHub cannot base a pull request on a branch that lives in a fork, so all eight target main and each one carries the commits of those above it. Review and merge them in order:

  1. fix(biome.js) :: fix remaining lint issues #1366 :: fix(biome.js) :: fix remaining lint issues
  2. fix(modal) :: give modal component an accessible name #1367 :: fix(modal) :: give modal component an accessible name
  3. fix(map) :: ignore map coordinates that are not a pair of numbers #1368 :: fix(map) :: ignore map coordinates that are not a pair of numbers
  4. feat(chart) :: render column charts as bar charts #1369 :: feat(chart) :: render column charts as bar charts
  5. fix(chart) :: align stacked series on their X values #1370 :: fix(chart) :: align stacked series on their X values
  6. fix(chart) :: line series up on a category axis for every chart type #1371 :: fix(chart) :: line series up on a category axis for every chart type ← this PR
  7. fix(npm) :: install dependencies only once at root level #1372 :: fix(npm) :: install dependencies only once at root level
  8. feat(typescript) :: typecheck browser JavaScript in CI #1373 :: feat(typescript) :: typecheck browser JavaScript in CI

@lovasoa lovasoa left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code

SELECT 'chart' AS component, 'treemap' AS type, 'Treemap alignment regression' AS title, 420 AS height;

SELECT 'North America' AS series, 'United States' AS label, 35 AS value;
SELECT 'North America' AS series, 'Canada' AS label, 15 AS value;
SELECT 'Europe' AS series, 'France' AS label, 30 AS value;
SELECT 'Europe' AS series, 'Germany' AS label, 55 AS value;

main

Image

this pr

Image

the black text on dark grey unreadable text bug is preexisting, but the missing label is new

@81reap
81reap force-pushed the stack/6-chart-category branch from 98f5d42 to cca79df Compare August 13, 2026 01:45
@81reap

81reap commented Aug 13, 2026

Copy link
Copy Markdown
Contributor Author

Good catch! I aligned every chart type on a text axis except rangeBar, so a treemap (has no axis) got its series padded with the other series' labels So North America never ended.

We now use an allowlist for some charts (line, area, bar, scatter, bubble, heatmap) in align_series_for. I also added unit tests for your specific example and rebased onto main.

@lovasoa
lovasoa merged commit e15b16d into sqlpage:main Aug 13, 2026
51 checks passed
@81reap
81reap deleted the stack/6-chart-category branch August 13, 2026 07:48
@81reap 81reap mentioned this pull request Aug 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants